import { Suspense } from "react"
import CardCompact from "@/components/card-compact"
import Heading from "@/components/heading"
import Spinner from "@/components/spinner"
import TicketCreateForm from "@/features/ticket/components/ticket-create-form"
import TicketList from "@/features/ticket/components/ticket-list"

const TicketsPage = () => {
  return (
    <div className="flex-1 flex flex-col gap-y-8">
      <Heading title="TicketsPage" description="All your tickets at once place" />

      <CardCompact
        title="Create Ticket"
        description="A new ticket will be created"
        content={<TicketCreateForm />}
        className="w-full max-w-[420px] self-center"
      />

      <Suspense fallback={<Spinner />}>
        <TicketList />
      </Suspense>
    </div>
  )
}

export default TicketsPage
